<template>
  <view class="container">
    <!-- 搜索头部 -->
    <view class="search-header" :style="{ paddingTop: 0 }">
      <view class="search-type">
        <view 
          v-for="(type, index) in searchTypes" 
          :key="index"
          :class="['type-item', { active: currentType === type.value }]"
          @tap="switchType(type.value)"
        >
          {{ type.label }}
        </view>
      </view>
      <view class="search-input-wrap">
        <text class="iconfont icon-search"></text>
        <input 
          class="search-input" 
          v-model="searchKeyword"
          :placeholder="'搜索' + currentTypeLabel"
          @input="handleInput"
          @confirm="handleSearch"
          confirm-type="search"
        />
        <text class="clear-btn" v-if="searchKeyword" @tap="clearSearch">×</text>
      </view>
    </view>

    <!-- 搜索结果 -->
    <scroll-view 
      class="search-results" 
      scroll-y 
      :style="searchResultsStyle"
    >
      <!-- 搜索历史 -->
      <view class="search-history" v-if="!searchKeyword && searchHistory.length > 0">
        <view class="history-header">
          <text class="history-title">搜索历史</text>
          <text class="clear-history" @tap="clearSearchHistory">清空</text>
        </view>
        <view class="history-tags">
          <text 
            class="history-tag" 
            v-for="(item, index) in searchHistory" 
            :key="index"
            @tap="selectHistory(item)"
          >
            {{ item }}
          </text>
        </view>
      </view>

      <!-- 加载状态 -->
      <view v-if="loading" class="loading-state">
        <view class="loading-icon"></view>
        <text class="loading-text">搜索中...</text>
      </view>

      <!-- 医院列表 -->
      <view v-else-if="currentType === 'hospital'" class="result-list">
        <view 
          v-for="(item, index) in hospitalList" 
          :key="index"
          class="result-item"
          @tap="goToHospital(item)"
        >
          <image :src="getStaticFilePath(item.imgUrl) || '/static/images/default-hospital.png'" mode="aspectFill" class="item-image"></image>
          <view class="item-info">
            <text class="item-name">{{ item.name }}</text>
            <view class="item-detail">
              <text class="item-sub-detail">{{ item.hospitalGrade }}</text>
              <text class="item-sub-detail">{{ item.diseaseType }}</text>
            </view>
            <view class="item-address">
              <text class="iconfont icon-dingwei"></text>
              <text class="address-text">{{ item.address }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 科室列表 -->
      <view v-else-if="currentType === 'department'" class="result-list">
        <view 
          v-for="(item, index) in mergedDepartmentList" 
          :key="index"
          class="result-item"
          @tap="showDepartmentDetail(item)"
        >
          <!-- 科室没有图片，直接是信息 -->
          <view class="item-info no-image">
            <text class="item-name">{{ item.name }}</text>
            <view class="item-detail">
              <text class="item-sub-detail">{{ item.diseaseType }}</text>
              <text class="item-sub-detail">{{ item.hospitals.length }}家医院</text>
            </view>
          </view>
          <view class="arrow-right">
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>

      <!-- 医生列表 -->
      <view v-else-if="currentType === 'doctor'" class="result-list">
        <view 
          v-for="(item, index) in doctorList" 
          :key="index"
          class="result-item doctor-item"
          @tap="goToDoctor(item)"
        >
          <image :src="getStaticFilePath(item.imgUrl) || '/static/images/default-avatar.png'" mode="aspectFill" class="item-image avatar"></image>
          <view class="item-info">
            <view class="item-name-title">
              <text class="item-name">{{ item.name }}</text>
              <text class="item-title">{{ item.jobTitle }}</text>
            </view>
            <text class="item-sub-detail">{{ item.departmentName }} | {{ item.hospitalName }}</text>
            <text class="item-specialty">擅长: {{ item.professionalExpertise || '暂无' }}</text>
          </view>
          <view class="arrow-right">
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>

      <!-- 无搜索结果 -->
      <view v-if="showNoResult && !loading" class="no-result">
        <text>暂无搜索结果</text>
      </view>
    </scroll-view>

    <!-- 科室详情弹窗 -->
    <uni-popup ref="departmentPopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ currentDepartment.name }}</text>
          <text class="close-btn" @tap="closeDepartmentDetail">×</text>
        </view>
        <scroll-view class="hospital-list" scroll-y>
          <view 
            v-for="(hospital, index) in currentDepartment.hospitals" 
            :key="index"
            class="hospital-item"
            @tap="goToHospital(hospital)"
          >
            <text class="hospital-name">{{ hospital.hospitalName }}</text>
            <text class="hospital-address">{{ hospital.address }}</text>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getHospitalByBiseaseType } from '@/api/hospital'
import { selectDepartmentAll } from '@/api/department'
import { selectDoctorByDepartmentId } from '@/api/doctor'
import { getToken } from '@/utils/auth'
import { getStaticFilePath } from '@/utils/common'

export default {
  data() {
    return {
      getStaticFilePath,
      statusBarHeight: 20,
      searchHeaderHeight: 0,
      searchTypes: [
        { label: '医院', value: 'hospital' },
        { label: '科室', value: 'department' },
        { label: '医生', value: 'doctor' }
      ],
      currentType: 'hospital',
      searchKeyword: '',
      hospitalList: [],
      departmentList: [],
      doctorList: [],
      showNoResult: false,
      currentCityId: '',
      currentBiseaseType: '',
      loading: false,
      searchTimer: null,
      mergedDepartmentList: [],
      currentDepartment: {
        name: '',
        diseaseType: '',
        snapshot: '',
        hospitals: []
      },
      searchHistory: []
    }
  },
  computed: {
    currentTypeLabel() {
      const type = this.searchTypes.find(t => t.value === this.currentType)
      return type ? type.label : ''
    },
    searchResultsStyle() {
      const headerHeight = this.statusBarHeight + 110 // 减小头部总高度
      return {
        top: headerHeight + 'px'
      }
    }
  },
  created() {
    // 获取状态栏高度
    try {
      const windowInfo = uni.getWindowInfo()
      this.statusBarHeight = windowInfo.statusBarHeight
    } catch (error) {
      console.error('获取状态栏高度失败:', error)
      this.statusBarHeight = 20
    }
    
    // 获取城市ID
    this.getCurrentCityId()
  },
  onLoad(options) {
    // 检查登录状态
    if (!getToken()) {
      uni.showModal({
        title: '提示',
        content: '请先登录后再使用搜索功能',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/login/login'
            })
          } else {
            uni.navigateBack()
          }
        }
      })
      return
    }

    // 获取疾病类型
    this.currentBiseaseType = options.id || ''
    
    // 初始加载数据
    this.loadInitialData()
    this.loadSearchHistory()
  },
  methods: {
    // 获取当前城市ID
    getCurrentCityId() {
      try {
        // 1. 尝试从缓存获取
        const cityId = uni.getStorageSync('currentCityId')
        if (cityId) {
          this.currentCityId = cityId
          return
        }
        
        // 2. 尝试从全局状态获取
        const pages = getCurrentPages()
        const prevPage = pages[pages.length - 2]
        if (prevPage && prevPage.$vm.$refs.globalheaderRef) {
          this.currentCityId = prevPage.$vm.$refs.globalheaderRef.currentCityId
          if (this.currentCityId) {
            // 保存到缓存
            uni.setStorageSync('currentCityId', this.currentCityId)
            return
          }
        }
        
        // 3. 如果都没有，使用默认城市ID
        this.currentCityId = '1' // 默认城市ID，根据实际情况修改
        uni.setStorageSync('currentCityId', this.currentCityId)
        
        console.log('当前城市ID:', this.currentCityId)
      } catch (error) {
        console.error('获取城市ID失败:', error)
        // 使用默认城市ID
        this.currentCityId = '1'
        uni.setStorageSync('currentCityId', this.currentCityId)
      }
    },
    async loadInitialData() {
      this.loading = true
      this.showNoResult = false
      try {
        switch (this.currentType) {
          case 'hospital':
            await this.searchHospitals()
            break
          case 'department':
            await this.searchDepartments()
            break
          case 'doctor':
            await this.searchDoctors()
            break
        }
      } catch (error) {
        console.error('加载初始数据失败:', error)
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    goBack() {
      const pages = getCurrentPages()
      if (pages.length > 1) {
        uni.navigateBack()
      } else {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    },
    switchType(type) {
      this.currentType = type
      this.searchKeyword = ''
      this.loadInitialData()
    },
    handleInput() {
      // 清除之前的定时器
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      // 设置新的定时器，300ms后执行搜索
      this.searchTimer = setTimeout(() => {
        this.handleSearch()
      }, 300)
    },
    handleSearch() {
      if (!this.searchKeyword) {
        this.loadInitialData()
        this.loadSearchHistory()
        return
      }
      this.saveSearchHistory(this.searchKeyword)
      
      switch (this.currentType) {
        case 'hospital':
          this.searchHospitals()
          break
        case 'department':
          this.searchDepartments()
          break
        case 'doctor':
          this.searchDoctors()
          break
      }
    },
    async searchHospitals() {
      this.loading = true
      this.showNoResult = false
      try {
        console.log('开始搜索医院:', {
          keyword: this.searchKeyword
        })
        
        const res = await getHospitalByBiseaseType()
        console.log('医院搜索结果:', res)
        
        if (res.code === 200 && Array.isArray(res.data)) {
          let filteredList = res.data
          
          // 如果有关键词，进行过滤
          if (this.searchKeyword) {
            const keyword = this.searchKeyword.toLowerCase()
            filteredList = res.data.filter(hospital => {
              // 检查医院名称
              if (hospital.name && hospital.name.toLowerCase().includes(keyword)) {
                return true
              }
              // 检查医院地址
              if (hospital.address && hospital.address.toLowerCase().includes(keyword)) {
                return true
              }
              // 检查医院简介
              if (hospital.snapshot && hospital.snapshot.toLowerCase().includes(keyword)) {
                return true
              }
              return false
            })
          }
          
          this.hospitalList = filteredList
          this.showNoResult = this.hospitalList.length === 0
          
          // 如果没有搜索结果，显示提示
          if (this.showNoResult) {
            uni.showToast({
              title: '未找到相关医院',
              icon: 'none',
              duration: 2000
            })
          }
        } else {
          console.error('搜索医院失败:', res)
          uni.showToast({
            title: res.msg || '搜索失败，请重试',
            icon: 'none'
          })
          this.hospitalList = []
          this.showNoResult = true
        }
      } catch (error) {
        console.error('搜索医院错误:', error)
        uni.showToast({
          title: '搜索失败，请重试',
          icon: 'none'
        })
        this.hospitalList = []
        this.showNoResult = true
      } finally {
        this.loading = false
      }
    },
    async searchDepartments() {
      this.loading = true
      this.showNoResult = false
      try {
        console.log('开始搜索科室:', {
          keyword: this.searchKeyword
        })
        
        const res = await selectDepartmentAll()
        console.log('科室搜索结果:', res)
        
        if (res.code === 200 && Array.isArray(res.data)) {
          let filteredList = res.data
          
          // 如果有关键词，进行过滤
          if (this.searchKeyword) {
            const keyword = this.searchKeyword.toLowerCase()
            filteredList = res.data.filter(department => {
              // 检查科室名称
              if (department.name && department.name.toLowerCase().includes(keyword)) {
                return true
              }
              // 检查科室简介
              if (department.snapshot && department.snapshot.toLowerCase().includes(keyword)) {
                return true
              }
              // 检查医院名称
              if (department.hospitalName && department.hospitalName.toLowerCase().includes(keyword)) {
                return true
              }
              return false
            })
          }
          
          // 合并相同名称的科室
          this.mergedDepartmentList = this.mergeDepartments(filteredList)
          this.showNoResult = this.mergedDepartmentList.length === 0
          
          // 如果没有搜索结果，显示提示
          if (this.showNoResult) {
            uni.showToast({
              title: '未找到相关科室',
              icon: 'none',
              duration: 2000
            })
          }
        } else {
          console.error('搜索科室失败:', res)
          uni.showToast({
            title: res.msg || '搜索失败，请重试',
            icon: 'none'
          })
          this.mergedDepartmentList = []
          this.showNoResult = true
        }
      } catch (error) {
        console.error('搜索科室错误:', error)
        uni.showToast({
          title: '搜索失败，请重试',
          icon: 'none'
        })
        this.mergedDepartmentList = []
        this.showNoResult = true
      } finally {
        this.loading = false
      }
    },
    async searchDoctors() {
      this.loading = true
      this.showNoResult = false
      try {
        console.log('开始搜索医生:', {
          keyword: this.searchKeyword
        })
        
        // 先获取所有科室
        const deptRes = await selectDepartmentAll()
        if (deptRes.code !== 200 || !Array.isArray(deptRes.data)) {
          throw new Error('获取科室列表失败')
        }
        
        // 获取所有医生
        let allDoctors = []
        for (const dept of deptRes.data) {
          try {
            const res = await selectDoctorByDepartmentId(dept.id)
            if (res.code === 200 && Array.isArray(res.data)) {
              allDoctors = allDoctors.concat(res.data)
            }
          } catch (error) {
            console.error('获取科室医生失败:', error)
            continue
          }
        }
        
        // 如果有关键词，进行过滤
        if (this.searchKeyword) {
          const keyword = this.searchKeyword.toLowerCase()
          allDoctors = allDoctors.filter(doctor => {
            // 检查医生姓名
            if (doctor.name && doctor.name.toLowerCase().includes(keyword)) {
              return true
            }
            // 检查科室名称
            if (doctor.departmentName && doctor.departmentName.toLowerCase().includes(keyword)) {
              return true
            }
            // 检查医院名称
            if (doctor.hospitalName && doctor.hospitalName.toLowerCase().includes(keyword)) {
              return true
            }
            // 检查专长
            if (doctor.professionalExpertise && doctor.professionalExpertise.toLowerCase().includes(keyword)) {
              return true
            }
            return false
          })
        }
        
        this.doctorList = allDoctors
        this.showNoResult = this.doctorList.length === 0
        
        // 如果没有搜索结果，显示提示
        if (this.showNoResult) {
          uni.showToast({
            title: '未找到相关医生',
            icon: 'none',
            duration: 2000
          })
        }
      } catch (error) {
        console.error('搜索医生错误:', error)
        uni.showToast({
          title: '搜索失败，请重试',
          icon: 'none'
        })
        this.doctorList = []
        this.showNoResult = true
      } finally {
        this.loading = false
      }
    },
    clearSearch() {
      this.searchKeyword = ''
      this.loadInitialData()
    },
    clearResults() {
      this.hospitalList = []
      this.departmentList = []
      this.doctorList = []
      this.showNoResult = false
    },
    async goToHospital(hospital) {
      try {
        // 获取完整的医院信息
        const res = await getHospitalByBiseaseType()
        if (res.code === 200 && Array.isArray(res.data)) {
          const hospitalData = res.data.find(h => h.id === hospital.id)
          if (hospitalData) {
            // 确保所有必要字段都存在
            const completeHospitalData = {
              id: hospitalData.id,
              name: hospitalData.name,
              imgUrl: hospitalData.imgUrl || '/static/images/default-hospital.png',
              address: hospitalData.address || '',
              telephone: hospitalData.telephone || '',
              hospitalGrade: hospitalData.hospitalGrade || '',
              diseaseType: hospitalData.diseaseType || '',
              snapshot: hospitalData.snapshot || ''
            }
            
            uni.navigateTo({
              url: `/pages/hospital/detail?id=${completeHospitalData.id}`,
              success: (res) => {
                // 将医院数据传递给详情页
                res.eventChannel.emit('hospitalData', completeHospitalData)
              }
            })
          } else {
            uni.showToast({
              title: '医院信息不存在',
              icon: 'none'
            })
          }
        } else {
          uni.showToast({
            title: '获取医院信息失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取医院信息错误:', error)
        uni.showToast({
          title: '获取医院信息失败',
          icon: 'none'
        })
      }
    },
    goToDepartment(department) {
      uni.navigateTo({
        url: `/pages/hospital/department?id=${department.id}`
      })
    },
    async goToDoctor(doctor) {
      try {
        console.log('跳转到医生详情:', doctor);
        
        // 确保传递必要的医生信息
        const doctorData = {
          id: doctor.id,
          name: doctor.name,
          imgUrl: doctor.imgUrl || '/static/images/default-avatar.png',
          jobTitle: doctor.jobTitle || '',
          departmentName: doctor.departmentName || '',
          hospitalName: doctor.hospitalName || '',
          professionalExpertise: doctor.professionalExpertise || '',
          education: doctor.education || '',
          introduction: doctor.introduction || ''
        };
        
        uni.navigateTo({
          url: `/pages/hospital/doctor?id=${doctorData.id}`,
          success: (res) => {
            // 将医生数据传递给详情页
            res.eventChannel.emit('doctorData', doctorData);
          },
          fail: (err) => {
            console.error('跳转失败:', err);
            uni.showToast({
              title: '跳转失败，请重试',
              icon: 'none'
            });
          }
        });
      } catch (error) {
        console.error('跳转错误:', error);
        uni.showToast({
          title: '跳转失败，请重试',
          icon: 'none'
        });
      }
    },
    // 合并相同名称的科室
    mergeDepartments(departments) {
      const mergedMap = new Map()
      
      departments.forEach(dept => {
        if (!mergedMap.has(dept.name)) {
          mergedMap.set(dept.name, {
            name: dept.name,
            diseaseType: dept.diseaseType,
            snapshot: dept.snapshot,
            hospitals: [{
              hospitalName: dept.hospitalName,
              address: dept.address,
              id: dept.hospitalId
            }]
          })
        } else {
          const existing = mergedMap.get(dept.name)
          existing.hospitals.push({
            hospitalName: dept.hospitalName,
            address: dept.address,
            id: dept.hospitalId
          })
        }
      })
      
      return Array.from(mergedMap.values())
    },
    
    // 显示科室详情
    showDepartmentDetail(department) {
      this.currentDepartment = department
      this.$refs.departmentPopup.open()
    },
    
    // 关闭科室详情
    closeDepartmentDetail() {
      this.$refs.departmentPopup.close()
    },
    // 新增：保存搜索历史
    saveSearchHistory(keyword) {
      if (keyword) {
        let history = uni.getStorageSync('searchHistory') || [];
        // 防止重复并添加到最前面
        history = [keyword, ...history.filter(item => item !== keyword)];
        // 限制历史记录数量，例如10条
        if (history.length > 10) {
          history = history.slice(0, 10);
        }
        uni.setStorageSync('searchHistory', history);
        this.searchHistory = history; // 更新data属性
      }
    },
    // 新增：加载搜索历史
    loadSearchHistory() {
      this.searchHistory = uni.getStorageSync('searchHistory') || [];
    },
    // 新增：清空搜索历史
    clearSearchHistory() {
      uni.removeStorageSync('searchHistory');
      this.searchHistory = [];
    },
    // 新增：选择历史记录进行搜索
    selectHistory(keyword) {
      this.searchKeyword = keyword;
      this.handleSearch();
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #F5F6FA;
}

.search-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #FFFFFF;
  padding: 0 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.search-type {
  display: flex;
  padding: 4rpx 0;
  border-bottom: 1rpx solid #EEEEEE;
}

.type-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666666;
  padding: 2rpx 0;
  position: relative;
}

.type-item.active {
  color: #4B7BFF;
  font-weight: bold;
}

.type-item.active::after {
  content: '';
  position: absolute;
  bottom: -12rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #4B7BFF;
  border-radius: 2rpx;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  height: 72rpx;
  background-color: #F5F6FA;
  border-radius: 36rpx;
  padding: 0 32rpx;
  margin: 4rpx 0;
}

.search-input-wrap .icon-search {
  font-size: 32rpx;
  color: #999999;
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  height: 72rpx;
  font-size: 28rpx;
}

.clear-btn {
  font-size: 40rpx;
  color: #999999;
  padding: 0 20rpx;
}

.search-results {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F5F6FA;
}

.search-history {
  padding: 32rpx;
  background-color: #FFFFFF;
  margin-bottom: 8rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.history-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.clear-history {
  font-size: 28rpx;
  color: #4B7BFF;
}

.history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.history-tag {
  background-color: #e0e7ff;
  color: #4B7BFF;
  font-size: 24rpx;
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
}

.result-list {
  padding: 0 32rpx;
  padding-bottom: 32rpx;
}

.result-item {
  display: flex;
  padding: 24rpx;
  background-color: #FFFFFF;
  margin-bottom: 16rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  align-items: center;
}

/* 浅色背景 */
/* .bg-hospital-light { background-color: #e6f7ff; }
.bg-department-light { background-color: #f6ffed; }
.bg-doctor-light { background-color: #f9f0ff; } */

.item-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.item-image.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 科室列表项没有图片时的调整 */
.item-info.no-image {
  margin-left: 0;
}

.item-name {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.item-detail {
  display: flex;
  align-items: center;
  margin-bottom: 4rpx;
}

.item-sub-detail {
  font-size: 26rpx;
  color: #666666;
  margin-right: 16rpx;
}

.item-address {
  display: flex;
  align-items: flex-start;
  margin-top: 4rpx;
}

.address-text {
  font-size: 24rpx;
  color: #999999;
  margin-left: 8rpx;
  flex: 1;
}

.iconfont {
  font-size: 28rpx;
  color: #999999;
}

/* Doctor specific styles re-aligned with common structure */
.item-name-title {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.item-title {
  font-size: 24rpx;
  color: #4B7BFF;
  background-color: rgba(75, 123, 255, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  margin-left: 12rpx;
}

.item-specialty {
  font-size: 24rpx;
  color: #999999;
  margin-top: 4rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.arrow-right {
  display: flex;
  align-items: center;
  color: #CCCCCC;
  font-size: 32rpx;
  margin-left: 20rpx;
}

.no-result {
  padding: 100rpx 0;
  text-align: center;
  color: #999999;
  font-size: 28rpx;
}

.header-left,
.back-icon {
  display: none;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-icon {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #4B7BFF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999999;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.popup-content {
  background-color: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx;
  max-height: 80vh;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.close-btn {
  font-size: 48rpx;
  color: #999999;
  padding: 0 20rpx;
}

.hospital-list {
  max-height: 60vh;
}

.hospital-item {
  padding: 24rpx;
  border-bottom: 1rpx solid #EEEEEE;
}

.hospital-item:last-child {
  border-bottom: none;
}

.hospital-name {
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 8rpx;
  display: block;
}

.hospital-address {
  font-size: 26rpx;
  color: #999999;
  display: block;
}
</style> 